<template>
  <div>
    <div v-for="(promotionItem, promotionIndex) in promotion" :key="promotionIndex" class="promotion_row">
      <div v-if="res != null" v-for="(item, index) in Object.keys(res)" :key="index">
        <div class="promotion_col"
          v-if="item.split('-')[0] == promotionItem.value && item.split('-')[0] == 'FULL_DISCOUNT'">
          <!-- 满减，折扣 -->
          <div class="flex">
            <div class="deg_tag" :style="degTag">{{ promotionItem.title }}</div>
            <div class="text proText">满{{ res[item].fullMoney }}元，立享优惠</div>
          </div>
        </div>
        <div class="promotion_col" v-if="item.split('-')[0] == promotionItem.value && item.split('-')[0] == 'PINTUAN'">
          <!-- 拼团 -->
          <div class="flex">
            <div class="deg_tag" :style="degTag">{{ promotionItem.title }}</div>
            <div class="text proText">{{ res[item].promotionName }}</div>
          </div>
        </div>
        <div class="promotion_col"
          v-if="item.split('-')[0] == promotionItem.value && item.split('-')[0] == 'POINTS_GOODS'">
          <!-- 积分活动 -->
          <div class="flex">
            <div class="deg_tag" :style="degTag">{{ promotionItem.title }}</div>
            <div class="text proText">{{ res[item].promotionName }}</div>
          </div>
        </div>
        <div class="promotion_col" v-if="item.split('-')[0] == promotionItem.value && item.split('-')[0] == 'KANJIA'">
          <!-- 砍价活动 -->
          <div class="flex">
            <div class="deg_tag" :style="degTag">{{ promotionItem.title }}</div>
            <div class="text proText"></div>
          </div>
        </div>
        <div class="promotion_col" v-if="item.split('-')[0] == promotionItem.value && item.split('-')[0] == 'SECKILL'">
          <!-- 限时抢购 -->
          <div class="flex">
            <div class="deg_tag" :style="degTag">{{ promotionItem.title }}</div>
            <div class="text proText">{{ res[item].promotionName }}</div>
          </div>
        </div>
      </div>

      <div class="promotion_row">
        <div>

          <div class="promotion_col coupon" v-if="couponList && promotionIndex == 1">
            <!-- 优惠券 -->
            <div>
              <div class="deg_tag" :style="degTag">优惠券</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="props.res != null && Object.keys(res).length == 0">暂无促销信息</div>
  </div>
</template>

<script setup lang="ts">
import { colors } from '@/constants/injection-key';
import promotion from './promotion-type';
const degTag = { color: colors.themeColor, border: `2rpx solid ${colors.themeColor}`, };
const couponList = ref<any>('')
const props = defineProps({
  res: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

console.log('优惠123',props.res, props.res != null && Object.keys(props.res).length == 0)


watch(() => props.res, (newVal: any) => {
  if (newVal && newVal.length != 0 && newVal != null) {
    Object.keys(newVal).forEach(item => {
      let key = item.split('-')[0];
      newVal[item].__key = key;

      if (item.split('-')[0] == 'COUPON') {
        couponList.value = 'COUPON';

      }
    });
  }
}, { immediate: true })

</script>

<style scoped lang="scss">
.deg_tag {
  // color: $price-color;
  padding: 0 4rpx;
  // border: 2rpx solid $price-color;
  font-size: 22rpx;
}

.promotion_col {
  /**/
  // margin: 0 0 17rpx 0;

  padding: 0 !important;

  margin: 10rpx 0;
}


.proText {
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
  margin-left: 20rpx;
}

.coupon {
  display: flex;
}
</style>
